<template>
	<view style="background: #f4f4f4;" :style="{paddingBottom:128 + bottomHight +'rpx' }">
		<!-- 数据概览 -->
		<view class="fenxi-box shujugailan">
			<view class="fenxi-title d-b-c">
				<view class="title">
					数据概览
				</view>
				<view class="fenlei">
					<view v-for="(item,index) in timeList" :key="index">
						<u-button :type="timeValue==item.key ? 'primary' :'info'" :text="item.value"
							@click="timeClick(item.key)"></u-button>
					</view>
				</view>
			</view>
			<view class="fenxi-date">
				<text>{{timeValue==1 ? year-1 : timeValue==3? year-3 :year-5}}.{{month}}.{{date}} </text> -
				<text>{{year}}.{{month}}.{{date}} </text>
				<!-- 2022.08.22-2023.08.2 -->
			</view>
			<view class="shuju">
				<view class="shuju-item">
					<view>代理次数</view>
					<u-loading-icon :size="15" v-if="countLoading"></u-loading-icon>
					<view v-else>
						{{dailicount.cishu}}
					</view>
				</view>
				<view class="shuju-item">
					<view>代理金额<text v-if="!countLoading">({{dailijine.ave_unit}}元)</text></view>
					<u-loading-icon :size="15" v-if="countLoading"></u-loading-icon>
					<view v-else>{{dailijine.jine}}</view>
				</view>
				
			</view>
			<view class="caigoupianhao">
				<view>
					业务地区
				</view>
				<u-loading-icon :size="15" v-if="yewudiquLoading"></u-loading-icon>
				<view v-else>
					{{yewudiqu.length>0 ? yewudiqu :'-'}}
				</view>
			</view>
			<view class="caigoupianhao">
				<view>
					受信任业主
				</view>
				<u-loading-icon :size="15" v-if="shouxinrenyezhuLoading"></u-loading-icon>
				<view v-else>
					{{shouxinrenyezhu .length>0 ? shouxinrenyezhu :'-'}}
				</view>
			</view>
			<view class="caigoupianhao">
				<view>
					合作优秀供应商
				</view>
				<u-loading-icon :size="15" v-if="gongyingshangLoading"></u-loading-icon>
				<view v-else>
					{{youxiugongyingshang .length>0 ? youxiugongyingshang :'-'}}
				</view>
			</view>
		</view>

		<!-- 代理招标分析 -->
		<view class="fenxi-box caigoufenxi">
			<view class="fenxi-title d-b-c">
				<view class="title">
					代理招标分析
				</view>
				<view class="fenlei">
					<view>
						<u-button :type="dailizhaobiaoRadio==0 ? 'primary' :'info'" text="代理次数"
							@click="dailizhaobiaoRadioClick('0')"></u-button>
					</view>
					<view>
						<u-button :type="dailizhaobiaoRadio==1 ? 'primary' :'info'" text="代理预算"
							@click="dailizhaobiaoRadioClick('1')"></u-button>
					</view>
				</view>
			</view>
			<view class="fenxi-date">
				<text>{{timeValue==1 ? year-1 : timeValue==3? year-3 :year-5}}.{{month}}.{{date}} </text> -
				<text>{{year}}.{{month}}.{{date}} </text>
			</view>

			<view>
				<view class="unit" v-show="initChart1Data.length && !loadingChart1">
					{{dailizhaobiaoRadio==0 ? '次数（次）'  : '金额（' + unit + '元）'}}
				</view>
				<u-loading-icon v-if='loadingChart1&& !initChart1Data.length'></u-loading-icon>
				<!-- 不能加v-if v-show,所以在title里提示暂无数据 -->
				<view class="chart-box">
					<l-echart ref="chartRef" ></l-echart>
				</view>

				<!-- <view class="dataNull" v-if="!initChart1Data.length && !loadingChart1">
					<image src='https://img.bidcenter.com.cn/uni/qiqing/zanwushuju.png'></image>
					<view>暂无相关数据</view>
				</view> -->
			</view>
		</view>

		<!-- 省级地域前十代理招标排行 -->
		<view class="fenxi-box ">
			<view class="fenxi-title d-b-c">
				<view class="title">
					省级地域前十代理招标排行
				</view>
				<view class="fenlei">
					<view>
						<u-button :type="paihangRadio==2 ? 'primary' :'info'" text="代理次数"
							@click="paihangRadioClick('2')"></u-button>
					</view>
					<view>
						<u-button :type="paihangRadio==1 ? 'primary' :'info'" text="招标预算"
							@click="paihangRadioClick('1')"></u-button>
					</view>
				</view>
			</view>
			<view class="fenxi-date">
				<text>{{timeValue==1 ? year-1 : timeValue==3? year-3 :year-5}}.{{month}}.{{date}} </text> -
				<text>{{year}}.{{month}}.{{date}} </text>
			</view>

			<view class="zhaobiaopaihang">
				<u-loading-icon v-if='loadingChart2'></u-loading-icon>
				<view class="paihang" v-if="initChart2Data.length && !loadingChart2">
					<view class="paihang-top">
						<view>
							序号
						</view>
						<view>
							省份
						</view>
						<view v-if="paihangRadio==2">
							代理次数
						</view>
						<view v-if="paihangRadio==1">
							招标预算
						</view>
						<view>
							占比
						</view>
					</view>
					<view class="paihang-bottom">
						<view class="paihang-item" v-for="(item,index) in initChart2Data" :key="index">
							<u-parse :content="item.icon"></u-parse>
							<view>
								{{ item.new_Industry}}
							</view>
							<view v-if="paihangRadio==2">
								{{ item.cishu}}
							</view>
							<view v-if="paihangRadio==1">
								{{item.jine}}{{chart2Unit}}元
							</view>
							<view>
								{{ item.prop}}
							</view>
						</view>

					</view>
				</view>

				<view class="dataNull" v-if="!initChart2Data.length && !loadingChart2">
					<image src='https://img.bidcenter.com.cn/uni/qiqing/zanwushuju.png'></image>
					<view>暂无相关数据</view>
				</view>
			</view>
		</view>


		<!-- 合作业主排行 -->
		<view class="fenxi-box ">
			<view class="fenxi-title d-b-c">
				<view class="title">
					合作业主排行
				</view>
				<view class="fenlei">
					<view>
						<u-button :type="yezhuRadio==0 ? 'primary' :'info'" text="代理次数"
							@click="yezhuRadioClick('0')"></u-button>
					</view>
					<view>
						<u-button :type="yezhuRadio==1 ? 'primary' :'info'" text="招标预算"
							@click="yezhuRadioClick('1')"></u-button>
					</view>
				</view>
			</view>
			<view class="fenxi-date">
				<text>{{timeValue==1 ? year-1 : timeValue==3? year-3 :year-5}}.{{month}}.{{date}} </text> -
				<text>{{year}}.{{month}}.{{date}} </text>
			</view>

			<view class="hezuo">
				<u-loading-icon v-if='loadingChart3'></u-loading-icon>
				<view class="hezuo-list" v-if="initChart3Data.length && !loadingChart3">
					<view class="list-item" v-for="(item,index) in initChart3Data" :key="index">
						<view class="d-f list-top">
							<view class="f28 flex-1 text-ellipsis">{{item.news_xingzi}}</view>
							<view class="f28">
								{{yezhuRadio==0?  item.cishu  : item.jine+chart3Unit+'元'}}
							</view>
						</view>
						<view class="progress" v-if="yezhuRadio==0">
							<u-line-progress :percentage="(item.cishu/chart3Count)*100" :height="5" :showText="false"
								active-color="#2F6DFE" inactive-color="#eaf0fe">
							</u-line-progress>
						</view>
						<view class="progress" v-else>
							<u-line-progress :percentage="(item.jine/chart3Count)*100" :height="5" :showText="false"
								active-color="#2F6DFE" inactive-color="#eaf0fe">
							</u-line-progress>
						</view>
					</view>
				</view>

				<view class="dataNull" v-if="!initChart3Data.length && !loadingChart3">
					<image src='https://img.bidcenter.com.cn/uni/qiqing/zanwushuju.png'></image>
					<view>暂无相关数据</view>
				</view>
			</view>
		</view>

		<!-- 合作供应商TOP10 -->
		<view class="fenxi-box ">
			<view class="fenxi-title d-b-c">
				<view class="title">
					合作供应商TOP10
				</view>
				<view class="fenlei">
					<view>
						<u-button :type="gysRadio==0 ? 'primary' :'info'" text="合作次数"
							@click="gysRadioClick('0')"></u-button>
					</view>
					<view>
						<u-button :type="gysRadio==1 ? 'primary' :'info'" text="中标金额"
							@click="gysRadioClick('1')"></u-button>
					</view>
				</view>
			</view>
			<view class="fenxi-date">
				<text>{{timeValue==1 ? year-1 : timeValue==3? year-3 :year-5}}.{{month}}.{{date}} </text> -
				<text>{{year}}.{{month}}.{{date}} </text>
			</view>

			<view class="hezuo">
				<u-loading-icon v-if='loadingChart4'></u-loading-icon>
				<view class="hezuo-list" v-if="initChart4Data.length && !loadingChart4">
					<view class="list-item" v-for="(item,index) in initChart4Data" :key="index">
						<view class="d-f list-top">
							<view class="f28 flex-1 text-ellipsis">{{item.news_zhongbiao}}</view>
							<view class="f28">
								{{gysRadio==0?  item.cishu  : item.jine+chart4Unit+'元'}}
							</view>
						</view>
						<view class="progress" v-if="gysRadio==0">
							<u-line-progress :percentage="(item.cishu/chart4Count)*100" :height="5" :showText="false"
								active-color="#2F6DFE" inactive-color="#eaf0fe">
							</u-line-progress>
						</view>
						<view class="progress" v-else>
							<u-line-progress :percentage="(item.jine/chart4Count)*100" :height="5" :showText="false"
								active-color="#2F6DFE" inactive-color="#eaf0fe">
							</u-line-progress>
						</view>
					</view>
				</view>
			
				<view class="dataNull" v-if="!initChart3Data.length && !loadingChart3">
					<image src='https://img.bidcenter.com.cn/uni/qiqing/zanwushuju.png'></image>
					<view>暂无相关数据</view>
				</view>
			</view>
		</view>
		
		<!-- 更多分析请前往采招网PC端 -->
		<view class="qianwang" @click="qianwangClick">更多分析请前往采招网PC端</view>
	</view>
</template>

<script>
	import lEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue'
	import * as echarts from 'echarts'
	let chart = null
	export default {
		name: "Dailifenxi",
		props: ["comcode", "vcode", "companyName", "bottomHight"],
		components: {
			lEchart
		},
		data() {
			let now = new Date();
			const year = now.getFullYear();
			const month = (now.getMonth() + 1) < 0 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1;
			const date = now.getDate() < 0 ? '0' + now.getDate() : now.getDate();
			return {
				location: 10901,
				year: year,
				month: month,
				date: date,
				timeList: [{
						key: '1',
						value: '近一年'
					},
					{
						key: '3',
						value: '近三年'
					},
					{
						key: '5',
						value: '近五年'
					}
				],
				timeValue: '1',
				dailicount: {},
				dailijine: {},
				countLoading: true,
				
				yewudiquLoading:true,
				isYewudiqu: true,
				yewudiqu:'',
				
				shouxinrenyezhuLoading:true,
				isShouxinren: true,
				shouxinrenyezhu:'',
				
				gongyingshangLoading:"0",
				isYouixiugys: true,
				youxiugongyingshang:'',
				
				paihangRadio:'2',
				
				
				loadingChart1: true,
				loadingChart2: true,
				loadingChart3: false,
				loadingChart4: false,
				initChart1Data: [],
				initChart2Data: [],
				initChart3Data: [],
				initChart4Data: [],
				unit: '',

				dailizhaobiaoRadio:'0',
				yezhuRadio:"0",
				gysRadio:"0",
			
				
				
				chart3Count:0,
				chart4Count:0,
				

				ec: {
					lazyLoad: true
				},
				option: {},
				chart1Show: true,
				
				chart2Unit:'',
				chart3Unit:'',
				chart4Unit:'',
				
			}
		},

		watch: {

		},
		created() {

		},
		async mounted() {
			this.$nextTick(() => {
				this.init()
			})
		},

		methods: {
			async initChart() {
				// chart 图表实例不能存在data里
				chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(this.option)
			},
			init() {
				// this.loadingChart1 = true
				this.loadingChart2 = true
				this.loadingChart3 = true
				this.loadingChart4 = true
				this.initChart1Data = []
				this.initChart2Data = []
				this.initChart3Data = []
				this.initChart4Data = []
				chart=null
				this.getShujugailan()
				//省前十
				this.getYewudiqu()
				//合作业主
				this.getHezuoyezhu()
				
				//代理招标分析
				this.chart1()	
			
				//入围次数
				this.getGys()
			},
			timeClick(value) {
				this.timeValue = value
				
					this.init()
			},
			//获取数据概览
			getShujugailan() {
				uni.$u.http
					.post('/analysis/Company/agent/GaikuangHandler.ashx', {
						location: this.location,
						comcode: this.comcode,
						vcode: this.vcode,
						time: this.timeValue, // 0/1：近一年 3：近三年 5：近五年
					})
					.then(rs => {
						this.countLoading = false;
						this.dailicount = rs.zhaobiaocount;
						this.dailijine = rs.zhongbiaojine;
						
					})
			},
			//获取受信任业主--多处共用一个接口，by豆豆-接口信息不完整
			getHezuoyezhu() {
				uni.$u.http
					.post('/analysis/Company/agent/AgentGroupByYeZhuHandler.ashx', {
						location: this.location,
						comcode: this.comcode,
						vcode: this.vcode,
						time: this.timeValue,
						rttype: this.yezhuRadio, // 分组类别 默认0 返回数量，并按数量排序 1返回金额，并按金额排序
					})
					.then(rs => {
						this.shouxinrenyezhuLoading = false
						this.loadingChart3 = false
						const {
							list
						} = rs
						//顶部优秀合作供应商
						if (this.isShouxinren) {
							let arr = []
							let shouxinrenArr = list.slice(0, 1)
							shouxinrenArr.map((item) => {
								arr.push(item.news_xingzi)
							})
							this.shouxinrenyezhu = arr.join(',')
							this.isShouxinren = false
						}
						//底部合作业主
						let newList = list.slice(0, 10)
						let maxCount =[]
						newList.map((item)=>{
							if(this.yezhuRadio==0){
								item.cishu=+item.cishu
								maxCount.push(item.cishu)
							}else{
								item.jine=+item.jine
								maxCount.push(item.jine)
								// count=count + item.jine
							}
							
						})
						this.chart3Count= Math.max(...maxCount)
						// console.log(this.chart3Count)
						this.initChart3Data=newList
						
						this.chart3Unit=rs.ave_unit
					})
			},
			//获取业务地区与省级排名前10--多处共用一个接口，by豆豆
			getYewudiqu() {
				uni.$u.http
					.post('/analysis/Company/agent/AgentGroupByAreaFenBuHandler.ashx', {
						location: this.location,
						comcode: this.comcode,
						vcode: this.vcode,
						time: this.timeValue, // 0/1：近一年 3：近三年 5：近五年
						ltype: this.paihangRadio, // 默认为0代表为合作业主分布 2代表为代理次数 1代表为代理金额 ---接口文档写的不对
						zbnum:1,
					})
					.then(rs => {
						this.loadingChart2 = false
						const {
							list
						} = rs
						if (this.isYewudiqu) {
							this.yewudiquLoading = false
							let arr = []
							let yewuArr = list.slice(0, 5)
							yewuArr.map((item) => {
								arr.push(item.new_Industry)
							})
							this.yewudiqu = arr.join(',')
							this.isYewudiqu=false
							
						}
						let newList=list.slice(0, 10)
						newList.map((item, index) => {
							if (index === 0) {
								item.icon =
									'<div><img src="//img.bidcenter.com.cn/www/zhuanti/shujufuwu/shuju/sort1.png" style="vertical-align:middle;margin-top:-4rpx" /></div>';
							} else if (index === 1) {
								item.icon =
									'<div><img  src="//img.bidcenter.com.cn/www/zhuanti/shujufuwu/shuju/sort2.png" style="vertical-align:middle;margin-top:-4rpx" /></div>';
							} else if (index === 2) {
								item.icon =
									'<div><img src="//img.bidcenter.com.cn/www/zhuanti/shujufuwu/shuju/sort3.png" style="vertical-align:middle;margin-top:-4rpx" /></div>';
							} else {
								item.icon = '<div>' + (index + 1) + '</div>';
							}
						})
						//前10不足补齐
						// const n = list.length;
						// if (n < 10) {
						// 	const nadd = 10 - n;
						// 	for (let i = 0; i < nadd; i++) {
						// 	  if (this.paihangRadio == 2) {
						// 		list.push({
						// 			new_Industry: "--",
						// 			cishu: "--",
						// 			ratio: "--",
						// 			icon: n + (i + 1) + ''
						// 		});
						// 	  } else {
						// 		list.push({
						// 		  new_Industry: "--",
						// 		  jine: "--",
						// 		  ratio: "--",
						// 		  icon:n + (i + 1) + ''
						// 		});
						// 	  }
						// 	}
						// }
						this.initChart2Data = newList
						this.chart2Unit=rs.ave_unit
					})
			},

			//代理招标分析--右侧切换
			dailizhaobiaoRadioClick(type) {
				this.dailizhaobiaoRadio = type
				// this.loadingChart1 = true
				this.initChart1Data = []
				chart = null
				this.chart1()
			},
			//排行分析--右侧切换
			paihangRadioClick(type) {
				this.isYewudiqu = false
				this.paihangRadio = type
				this.loadingChart2 = true
				this.initChart2Data = []
				this.getYewudiqu()
			},
			// 合作业主--右侧切换
			yezhuRadioClick(type) {
				this.isShouxinren = false
				this.yezhuRadio = type
				this.loadingChart3 = true
				this.initChart3Data = []
				this.getHezuoyezhu()
			},
			
			//合作供应商--右侧切换
			gysRadioClick(type){
				this.isYouixiugys = false
				this.gysRadio=type
				this.loadingChart4 = true
				this.initChart4Data = []
				this.getGys()
			},
			
			//代理招标分析图表
			chart1() {
				const xData = [];
				const yData = [];
				const unit = ""
				uni.$u.http
					.post("/analysis/Company/agent/AgentGroupByTimeRangeHandler.ashx", {
						location: this.location,
						comcode: this.comcode,
						vcode: this.vcode,
						time: this.timeValue, // 0/1：近一年 3：近三年 5：近五年
						rttype: this.dailizhaobiaoRadio, // rttype=0代表返回次数 rttype=1代表返回金额
					})
					.then((rs) => {
						this.loadingChart1 = false;
						const data = rs.list || [];
						this.initChart1Data = data
						if (this.dailizhaobiaoRadio == 0) {
							data.map((item) => {
								item.time = item.time.substring(2, 7).replace(/-/g, '/')
								xData.push(item.time);
								yData.push(item.cishu);
							});


						} else {
							// 单位由后台返回
							this.unit = rs.ave_unit;
							data.map((item) => {
								item.time = item.time.substring(2, 7).replace(/-/g, '/')
								xData.push(item.time);
								yData.push(item.jine);
							});
						}
						if (this.initChart1Data.length) {
							this.option = {
								title: {
									text: "",
									show: false,
								},
								legend: {
									show: false,
								},
								grid: {
									left: '2%',
									top: '5%',
									right: '3%',
									bottom: '8%',
									containLabel: true
								},
								tooltip: {
									trigger: "axis",
									confine: true,
									padding: [5, 15],
									 borderWidth: 10,
									borderColor: "rgba(47, 109, 254, 1)",
									backgroundColor: "#fff",
									textStyle: {
										fontSize: 12,
										color: "#606266",
									},
									axisPointer: {
										type: 'line',
										lineStyle: {
											type: "dashed",
											color: '#FF6464' // 设置竖线颜色
										}
									},
									formatter: `{a}\r\n{b}     {c}` + (this.dailizhaobiaoRadio == 0 ? '次' : this.unit + '元'),
							
								},
								xAxis: [{
							
									data: xData,
									axisLabel: {
										interval: this.timeValue == 1 ? 3 : this.timeValue == 3 ? 11 : 19,
										fontSize: 11,
										textStyle: {
											color: "#6C717E",
										},
										margin: 5,
							
									},
									axisTick: {
										show: false,
									},
									axisLine: {
										lineStyle: {
											color: "#DFE1EA"
										}
									}
								}, ],
								yAxis: [{
									type: "value",
									nameTextStyle: {
										color: "#6C717E",
										fontSize: 10,
										padding: [0, 0, 0, -15], // name文字位置 对应 上右下左
										align: "center",
									},
							
									axisLabel: {
										fontSize: 11,
										textStyle: {
											color: "#6C717E",
										},
										formatter: "{value}",
									},
									axisLine: {
										show: false
									},
									axisTick: {
										show: false,
									},
									splitLine: {
										show: true,
										lineStyle: {
											color: '#DFE1EA'
										}
									}
								}, ],
								series: [{
									name: this.dailizhaobiaoRadio == 0 ? '代理次数' : '代理预算',
									type: "line",
									data: yData,
									symbol: "circle",
									symbolSize: 6,
									areaStyle: {
										color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(255,100,100,0.5)' // 渐变起始颜色
										}, {
											offset: 1,
											color: 'rgba(255,100,100,0)' // 渐变结束颜色
										}])
									},
									itemStyle: {
										normal: {
											color: "#FF6464", // 改变折线点的颜色
											lineStyle: {
												color: "#FF6464",
												width: 1,
											},
											borderType: 'dashed' // 标记线类型
										},
									},
									emphasis: {
										//  itemStyle: {
										// borderWidth: 2,
										// // borderColor: "#FF6464",
										// borderColor: "blue",
										// borderCap: "round"
										//  },
									},
								}, ],
							}
						}else{
							this.option={
								title: {
									text: '暂无相关数据',
									x: 'center',
									y: 'center',
									textStyle: {
									  fontSize: 14,
									  fontWeight: 'normal',
									  color: "#6C717E"
									}
								}
							}
						}
						
						this.initChart()
						// chart.setOption(this.option)

					}).catch(err => {
						console.log(err)
						uni.$u.toast(err.msg || '111接口异常');
					});
			},

			//供应商
			getGys(){
				uni.$u.http
					.post('/analysis/Company/agent/AgentGroupByWinningHandler.ashx', {
						location: this.location,
						comcode: this.comcode,
						vcode: this.vcode,
						time: this.timeValue,
						rttype: this.gysRadio, // 分组类别 默认0 返回数量，并按数量排序 1返回金额，并按金额排序
					})
					.then(rs => {
						this.gongyingshangLoading = false
						this.loadingChart4 = false
						const {
							list
						} = rs
						//顶部优秀合作供应商
						if (this.isYouixiugys) {
							let arr = []
							let gysArr = list.slice(0, 1)
							gysArr.map((item) => {
								arr.push(item.news_zhongbiao)
							})
							this.youxiugongyingshang = arr.join(',')
							this.isYouixiugys = false
						}
						//底部合作供应商
						let newList = list.slice(0, 10)
						let maxCount =[]
						newList.map((item)=>{
							if(this.gysRadio==0){
								item.cishu=+item.cishu
								maxCount.push(item.cishu)
							}else{
								item.jine=+item.jine
								maxCount.push(item.jine)
								// count=count + item.jine
							}
							
						})
						this.chart4Unit=rs.ave_unit
						this.chart4Count= Math.max(...maxCount)
						this.initChart4Data=newList
					})
			},
			//前往pc
			qianwangClick(){
				const link = 'https://user.bidcenter.com.cn/v2023/#/saasApply/qiqing/dailishangfenxi/'+this.comcode+'/'+this.vcode
				uni.setClipboardData({
					data:link,
					success: () => {
						
					},
					fail:(error)=> {
						console.log('失败',error);
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
								
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/index.scss';
	@import '@/static/css/qiqing.scss';
</style>